<template>
  <div class="echart">
    <div class="content">
      <div id="map_cn"></div>
    </div>
  </div>
</template>
<script>
  import echarts from "echarts";
  import '../js/china' //这一步必须引入
  export default {
    data() {
      return {
        //地图中的数据
        dataList: [
          {
            name: "南海诸岛",
            value: 25,
          },
          {
            name: "北京",
            value: 71,
          },
          {
            name: "天津",
            value: 52,
          },
          {
            name: "上海",
            value: 14,
          },
          {
            name: "重庆",
            value: 50,
          },
          {
            name: "河北",
            value: 20,
          },
          {
            name: "河南",
            value: 30,
          },
          {
            name: "云南",
            value: 55,
          },
          {
            name: "辽宁",
            value: 50,
          },
          {
            name: "黑龙江",
            value: 40,
          },
          {
            name: "湖南",
            value: 6,
          },
          {
            name: "安徽",
            value: 96,
          },
          {
            name: "山东",
            value: 75,
          },
          {
            name: "新疆",
            value: 45,
          },
          {
            name: "江苏",
            value: 15,
          },
          {
            name: "浙江",
            value: 8,
          },
          {
            name: "江西",
            value: 78,
          },
          {
            name: "湖北",
            value: 78,
          },
          {
            name: "广西",
            value: 36,
          },
          {
            name: "甘肃",
            value: 25,
          },
          {
            name: "山西",
            value: 140,
          },
          {
            name: "内蒙古",
            value: 85,
          },
          {
            name: "陕西",
            value: 85,
          },
          {
            name: "吉林",
            value: 74,
          },
          {
            name: "福建",
            value: 20,
          },
          {
            name: "贵州",
            value: 74,
          },
          {
            name: "广东",
            value: 47,
          },
          {
            name: "青海",
            value: 45,
          },
          {
            name: "西藏",
            value: 41,
          },
          {
            name: "四川",
            value: 3,
          },
          {
            name: "宁夏",
            value: 7,
          },
          {
            name: "海南",
            value: 7,
          },
          {
            name: "台湾",
            value: 200,
          },
          {
            name: "香港",
            value: 2,
          },
          {
            name: "澳门",
            value: 5,
          }
        ],
        //指定图表的配置项和数据
        option: {
          //标题组件
          title: {
            show: true,
            text: '全国常态化核酸检测点',
            subtext: '截至到2022年8月',
            left: "center",
            top: 16,
          },
          //提示框组件
          tooltip: {
            show: true,
            //触发类型：数据项图形触发
            trigger: 'item',
            padding: 10,
            borderWidth: 1,
            borderColor: '#409eff',
            backgroundColor: 'rgba(255,255,255,0.4)',
            textStyle: {
              color: '#000000',
              fontSize: 12
            },
            //提示框内容格式器
            formatter: (e) => {
              let data = e.data;
              //此处将各等级景点数量表示为0-10内的随机整数
              data.five = Math.random() * 10 | 0;
              data.four = Math.random() * 10 | 0;
              data.three = Math.random() * 10 | 0;
              data.two = Math.random() * 10 | 0;
              data.one = Math.random() * 10 | 0;
              //景点数量 - 五个等级之和
              data.number = data.five + data.four + data.three + data.two + data.one;
              //字符串模板
              let context = `
               <div>
                   <p style="line-height: 30px; font-weight: 600">${data.name}</p>
                   <p><span>核酸点数量 : </span><span>${data.number}处</span></p>
                   <p>核酸检测点:</p>
                   <p>北京博尔诚医学检验所核酸采样点</p>
                   <p style="font-size:8px;color:#004894">北京市通州区通惠南路万达广场(通州店)东门东侧约30米</p>
                   <p>绿影公园核酸采样点</p>
                   <p style="font-size:8px;color:#004894">北京市朝阳区奥运村街道南沙滩中街绿影园公园内</p>
               </div>
            `;
              return context;
              
                  //  <p><span>5A级 : </span><span>${data.five}处</span></p>
                  //  <p><span>4A级 : </span><span>${data.four}处</span></p>
                  //  <p><span>3A级 : </span><span>${data.three}处</span></p>
                  //  <p><span>2A级 : </span><span>${data.two}处</span></p>
                  //  <p><span>1A级 : </span><span>${data.one}处</span></p>
            }
          },
          //视觉映射组件(左下角)
          visualMap: {
            show: true,
            left: 26,
            bottom: 40,
            showLabel: true,
            // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
            calculable: false,
            // 拖拽时，是否实时更新
            realtime: true,
            align: 'left',
            //各颜色代表的区域
            pieces: [
              {
                gte: 100,
                label: "> 100",
                color: "#FDB669"
              },
              {
                gte: 50,
                lt: 99,
                label: "50 - 99",
                color: "#FECA7B"
              },
              {
                gte: 30,
                lt: 49,
                label: "30 - 49",
                color: "#FEE191"
              },
              {
                gte: 10,
                lt: 29,
                label: "10 - 29",
                color: "#FFF0A8"
              },
              {
                lt: 9,
                label: '< 10',
                color: "#FFFFBF"
              }
            ]
          },
          //地理坐标系组件
          geo: {
            //使用 registerMap 注册的地图名称
            map: "china",
            //是否开启鼠标缩放和平移漫游
            roam: true,
            //当前视角缩放比例
            zoom: 1,
            //滚轮缩放的极限控制
            scaleLimit: {
              min: 1, //最小1倍
              max: 3 //最大3倍
            },
            //地图组件离容器的距离
            top: 90,
            left: 'center',
            //图形上的文本标签
            label: {
              show: true,
              fontSize: "11"
            },
            //地图区域的多边形 图形样式
            itemStyle: {
              borderColor: "rgba(0, 0, 0, 0.2)",
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10,
              // 高亮状态(鼠标移入后)的多边形和标签样式
              emphasis: {
                areaColor: "#f98333",
                shadowOffsetX: 2,
                shadowOffsetY: 2,
              },
            }
          },
          series: [
            {
              type: "map",
              roam: true,
              geoIndex: 0,
              data: '',
              label: {
                show: true,
              }
            }
          ]
        },
      };
    },
    methods: {
      //定义方法 draw_map 绘制中国地图
      draw_map() {
        let myChart = this.$echarts.init(document.getElementById('map_cn'));
        //高亮轮播展示
        var hourIndex = 0;
        var carouselTime = null;
        //setInterval() 可在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除
        //使用setInterval方法后,必须使用箭头函数而不能写function,否则后续在该方法中无法调用data中的数据
        //carouselTime =setInterval(function(){ //错误写法
        carouselTime = setInterval(() => {
          //dispatchAction echarts的API：触发图表行为
          myChart.dispatchAction({
            type: "downplay", //downplay 取消高亮指定的数据图形
            seriesIndex: 0
          });
          myChart.dispatchAction({
            type: "highlight", //highLight 高亮指定的数据图形
            seriesIndex: 0, //系列index
            dataIndex: hourIndex //数据index
          });
          myChart.dispatchAction({
            type: "showTip", //showTip 显示提示框
            seriesIndex: 0,
            dataIndex: hourIndex
          });
          hourIndex++;
          //当循环到数组当中的最后一条数据后，重新进行循环
          if (hourIndex > this.dataList.length) {
            hourIndex = 0;
          }
        }, 3000);
        //鼠标移入组件时停止轮播
        myChart.on("mousemove", (e) => {
          clearInterval(carouselTime); //清除循环
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex
          });
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: e.dataIndex
          });
        });
        //鼠标移出组件时恢复轮播
        myChart.on("mouseout", () => {
          carouselTime = setInterval(() => {
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
            });
            myChart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: hourIndex
            });
            myChart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: hourIndex
            });
            hourIndex++;
            if (hourIndex > this.dataList.length) {
              hourIndex = 0;
            }
          }, 3000);
        });
        //显示地图
        myChart.setOption(this.option);
      },
      //修改echart配制
      setEchartOption() {
        this.option.series[0].data = this.dataList;
      },
    },
    created() {
      this.setEchartOption();
    },
    mounted() {
      this.$nextTick(() => {
        this.draw_map();
      });
    }
  };
</script>
<style scoped>
  .echart {
    width: 100%;
    
  }
  .content {
      width: 100%;
      height: 600px;
      margin: auto;
      
    }
    #map_cn {
        width: 1000px;
        height: 500px;
        background-color: #eaeaea;
        margin: auto;
      }
</style>